
<template>
	<view>
		<u-navbar title="案件录入" :background="navBg" title-color="#FFFFFF" back-icon-color="#FFFFFF">
			<view slot="right" class="add" @click="add">+新增</view>
		</u-navbar>
		<view class="content">
			<template v-for="(item, index) in list">
				<view class="card" :key="index">
					<view class="left">
						<view class="title">
							<text>{{item.title}}</text>
							<u-tag text="简易" type="success" shape="circle" v-if="item.type === 1"></u-tag>
							<u-tag text="一般" type="warning" shape="circle" v-if="item.type === 2"></u-tag>
							<u-tag text="重大" type="error" shape="circle" v-if="item.type === 3"></u-tag>
						</view>
						<view class="time">{{item.time}}</view>
					</view>
					<view class="right">
						<view><u-button type="primary" shape="circle" plain size="mini" @click="add">编辑</u-button></view>
						<view><u-button type="error" shape="circle" plain size="mini">上报</u-button></view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import Vue from "vue";
export default {
	data () {
		return {
			navBg: {
				background: '#1893FC'
			},
			list: [{
				title: '打架斗殴',
				type: 1,
				time: '2020-08-23'
			}, {
				title: '打架斗殴',
				type: 2,
				time: '2020-08-23'
			}, {
				title: '打架斗殴',
				type: 3,
				time: '2020-08-23'
			}]
		}
	} ,
	methods: {
		add: function() {
			uni.navigateTo({
				url: '/pages/caseEntry/add'
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.add {
	color: #FFFFFF; padding-right: 20rpx;
}
.content {
	margin: 20rpx;
}
.card {
	padding: 20rpx; background: #FFFFFF; border-radius: 10rpx; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.06);
	display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;
	.left {
		.title {
			display: flex; align-items: center;
			text {
				margin-right: 10rpx; font-size: 28rpx;
			}
		}
		.time {
			color: rgba($color: #000000, $alpha: 0.5); margin-top: 10rpx; font-size: 24rpx;
		}
	}
	.right {
		display: flex;
		view {
			&:nth-child(1) {
				margin-right: 10rpx;
			}
		}
	}
}
/deep/.u-tag {
	border: none !important;
}
</style>
